<template>
  <editor-layout class="edit"
                 @ok="handleOk"
                 v-on="$listeners"
                 v-loading="loading"
                 :loading="saveLoading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="code-panel">
      <div class="code-panel-left">
        <monaco-editor
            v-model="currValue"
            language="javascript"
        />
      </div>
      <div class="code-panel-right" v-show="desc">
        <markdown-it-vue class="md-body" :content="desc" />
        <monaco-editor
            v-show="false"
            :value="desc"
            language="javascript"
            :options="{readOnly: true}"
        />
      </div>
    </div>

  </editor-layout>
</template>

<script>
import monacoEditor from "@/components/common/monaco/monaco-editor";
import MarkdownItVue  from 'markdown-it-vue'
import 'highlight.js'
import {funEval} from "@/utils/FunUtil";

import {descMap} from '@/package/tools/common'

export default {
  name: 'tm-script-panel',
  cnName: '代码配置',
  components: {
    monacoEditor,
    MarkdownItVue
  },
  props: {
    value: String,
    type: String
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      currValue: this.value,
      desc: descMap[this.type] || ''
    }
  },
  methods: {
    handleOk() {
      try {
        funEval(this.currValue)
        this.$emit('on-ok', this.currValue)
      } catch (e) {
        console.error(e)
        this.$message.warning('脚本格式有误!')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.code-panel {
  position: relative;
  display: flex;
  height: 800px;

  &-left {
    width: 78.8%;
  }
  &-right {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
  }

  /deep/ .monaco-editor {
    height: 100%;
    overflow-y: hidden;
  }
}
</style>
